<!--
=========================================================
 Material Dashboard - v2.1.1
=========================================================

 Product Page: https://www.creative-tim.com/product/material-dashboard
 Copyright 2019 Creative Tim (https://www.creative-tim.com)
 Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)

 Coded by Creative Tim

=========================================================

 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
  <div class="container">
    <span class="skiplink-text">Skip to main content</span>
  </div>
</a>
<header class="navbar navbar-expand navbar-dark bg-primary flex-column flex-md-row bd-navbar">
  <a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/material-dashboard" target="_blank">
    品目ダッシュボード
  </a>
  <ul class="navbar-nav flex-row d-none d-md-flex">
    <!-- <li class="nav-item">
      <a class="nav-link p-2" href="#version">
        2.1.1
      </a>
    </li> -->
    <li class="nav-item dropdown">
      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        v2.1.1
      </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
        <a class="dropdown-item active" href="../../../../docs/2.1/getting-started/introduction.html">BS4 - 2.1.1</a>
        <a class="dropdown-item" href="../../../../docs/2.0/getting-started/introduction.html">BS4 - 2.1.0</a>
        <a class="dropdown-item" href="https://demos.creative-tim.com/bs3/material-dashboard/documentation/tutorial-components.html" target="_blank">BS3 - 1.0</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener" aria-label="GitHub">
        <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
          <title>GitHub</title>
          <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd" />
        </svg>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
        <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false">
          <title>Twitter</title>
          <path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor" />
        </svg>
      </a>
    </li>
  </ul>
  <div class="navbar-nav-scroll ml-md-auto ">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item">
        <a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard"> <i class="material-icons">card_membership</i> プロ仕様にアップグレードする </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://demos.creative-tim.com/material-dashboard/examples/dashboard.html"><i class="material-icons">view_carousel</i> ライブプレビュー</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener"><i class="material-icons">star</i>
          星を手伝う
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-item nav-link dropdown-toggle mr-md-2" href="introduction.html#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded=" ">
          <i class="material-icons">translate </i>
          日本人
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
          <a class="dropdown-item active  dropdown-flag-holder" href="#">
            日本人
          </a>
          <a class="dropdown-item dropdown-flag-holder" href="../../../../docs/2.1/getting-started/introduction.html">ENGLISH
          </a>
          <a class="dropdown-item dropdown-flag-holder" href="../../../../zh/docs/2.1/getting-started/introduction.html">中文
          </a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="" target="_blank" rel="noopener"></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="" target="_blank" rel="noopener"></a>
      </li>
    </ul>
  </div>
  <a href="https://github.com/creativetimofficial/material-dashboard" class="github-corner" aria-label="View source on Github">
    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
    </svg></a>
  <style>
    .github-corner:hover .octo-arm {
      animation: octocat-wave 560ms ease-in-out
    }

    @keyframes octocat-wave {

      0%,
      100% {
        transform: rotate(0)
      }

      20%,
      60% {
        transform: rotate(-25deg)
      }

      40%,
      80% {
        transform: rotate(10deg)
      }
    }

    @media (max-width:500px) {
      .github-corner:hover .octo-arm {
        animation: none
      }

      .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out
      }
    }
  </style>
</header>
<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <nav class="collapse bd-links" id="bd-docs-nav">
        <div class="bd-toc-item active">
          <a class="bd-toc-link" href="#docs">
            入門
          </a>
          <ul class="nav bd-sidenav">
            <li class="">
              <a href="../../../../ja/docs/2.1/getting-started/introduction.html">
                前書き
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/getting-started/license.html">
                ライセンス
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/getting-started/file-structure.html">
                ファイル構造
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/getting-started/build-tools.html">
                ビルドツール
              </a>
            </li>
          </ul>
        </div>
        <div class="bd-toc-item active">
          <a class="bd-toc-link" href="#docs">
            コンポーネント
          </a>
          <ul class="nav bd-sidenav">
            <li class="">
              <a href="../../../../ja/docs/2.1/components/alerts.html">
                アラート
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/badge.html">
                バッジ
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/breadcrumb.html">
                ブレッドクラム
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/buttons.html">
                ボタン
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/card.html">
                カード
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/carousel.html">
                カルーセル
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/collapse.html">
                崩壊
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/dropdowns.html">
                ドロップダウン
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/forms.html">
                フォーム
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/google-maps.html">
                グーグルマップ
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/info-areas.html">
                情報エリア
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/material-icons.html">
                素材のアイコン
              </a>
            </li>
            <li class="active bd-sidenav-active">
              <a href="../../../../ja/docs/2.1/components/modal.html">
                モーダル
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/navs.html">
                ナビ
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/navbar.html">
                ナビバー
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/pagination.html">
                ページ付け
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/parallax.html">
                視差
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/popovers.html">
                ポップオーバー
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/progress.html">
                進捗
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/tables.html">
                テーブル
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/tooltips.html">
                ツールチップ
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/typography.html">
                タイポグラフィ
              </a>
            </li>
          </ul>
        </div>
        <div class="bd-toc-item active">
          <a class="bd-toc-link" href="#docs">
            プラグイン
          </a>
          <ul class="nav bd-sidenav">
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/bootstrap-notify.html">
                ブートストラップ通知
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/perfect-scrollbar.html">
                完璧なスクロールバー
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/bootstrap-switch.html">
                ブートストラップスイッチ
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/datetimepicker.html">
                日時ピッカー
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/fullcalendar.html">
                フルカレンダー
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/jvector-map.html">
                jベクトルマップ
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/sweet-alert-2.html">
                スウィートアラート
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/jquery-validation.html">
                JQuery 検証as
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/fileupload-jasny.html">
                ファイルのアップロードJasny
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/jquery-tagsinput.html">
                jQueryのタグ入力
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/select-bootstrap.html">
                ブートストラップを選択
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/sliders.html">
                スライダー
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="d-none d-xl-block col-xl-2 bd-toc">
      <ul class="section-nav">
        <li class="toc-entry toc-h2"><a href="#例">例</a>
          <ul>
            <li class="toc-entry toc-h3"><a href="#モーダルコンポーネント">モーダルコンポーネント</a>
              <ul>
                <ul>
                  <li class="toc-entry toc-h5"><a href="#modal-title">Modal title</a></li>
                </ul>
              </ul>
            </li>
            <li class="toc-entry toc-h3"><a href="#ライブデモ">ライブデモ</a>
              <ul>
                <ul>
                  <li class="toc-entry toc-h5"><a href="#modal-title-1">Modal title</a></li>
                </ul>
              </ul>
            </li>
            <li class="toc-entry toc-h3"><a href="#長いコンテンツをスクロールする">長いコンテンツをスクロールする</a>
              <ul>
                <ul>
                  <li class="toc-entry toc-h5"><a href="#modal-title-2">Modal title</a></li>
                </ul>
              </ul>
            </li>
            <li class="toc-entry toc-h3"><a href="#ログインモーダル">ログインモーダル</a>
              <ul>
                <li class="toc-entry toc-h4"><a href="#log-in">Log in</a></li>
              </ul>
            </li>
            <li class="toc-entry toc-h3"><a href="#申し込みモード">申し込みモード</a>
              <ul>
                <ul>
                  <li class="toc-entry toc-h5"><a href="#register">Register</a></li>
                </ul>
                <li class="toc-entry toc-h4"><a href="#marketing">Marketing</a></li>
                <li class="toc-entry toc-h4"><a href="#fully-coded-in-html5">Fully Coded in HTML5</a></li>
                <li class="toc-entry toc-h4"><a href="#built-audience">Built Audience</a></li>
                <li class="toc-entry toc-h4"><a href="#-or-be-classical-"> or be classical </a></li>
              </ul>
            </li>
            <li class="toc-entry toc-h3"><a href="#ツールチップとポップオーバー">ツールチップとポップオーバー</a>
              <ul>
                <ul>
                  <li class="toc-entry toc-h5"><a href="#modal-title-3">Modal title</a></li>
                  <li class="toc-entry toc-h5"><a href="#popover-in-a-modal">Popover in a modal</a></li>
                  <li class="toc-entry toc-h5"><a href="#tooltips-in-a-modal">Tooltips in a modal</a></li>
                </ul>
              </ul>
            </li>
            <li class="toc-entry toc-h3"><a href="#youtubeの動画を埋め込む">YouTubeの動画を埋め込む</a></li>
          </ul>
        </li>
        <li class="toc-entry toc-h2"><a href="#任意サイズ">任意サイズ</a>
          <ul>
            <ul>
              <li class="toc-entry toc-h4"><a href="#large-modal">Large modal</a></li>
              <li class="toc-entry toc-h4"><a href="#small-modal">Small modal</a></li>
            </ul>
          </ul>
        </li>
        <li class="toc-entry toc-h2"><a href="#使用法">使用法</a>
          <ul>
            <li class="toc-entry toc-h3"><a href="#データ属性による">データ属性による</a></li>
            <li class="toc-entry toc-h3"><a href="#javascript経由">JavaScript経由</a></li>
            <li class="toc-entry toc-h3"><a href="#options">Options</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
      <div class="row mt-4">
        <a class="btn btn-default btn-sm ml-auto" href="https://github.com/creativetimofficial/material-dashboard-docs/edit/master/ja/docs/2.1/components/modal.html" target="_blank">編集 Github</a>
      </div>
      <h1 class="bd-title" id="content">
        モーダルs
      </h1>
      <p class="bd-lead">BootstrapのJavaScriptモーダルプラグインを使用して、ライトボックス、ユーザー通知、または完全にカスタムコンテンツのダイアログをサイトに追加します。</p>
      <h2 id="例">例</h2>
      <h3 id="モーダルコンポーネント">モーダルコンポーネント</h3>
      <p>以下は_static_モーダルの例です（その <code class="highlighter-rouge">position</code>と<code class="highlighter-rouge"> display</code>は上書きされています）。モーダルヘッダ、モーダルボディ（ <code class="highlighter-rouge">padding</code>に必要）、モーダルフッター（オプション）が含まれています。可能であれば、モーダルヘッダーに却下アクションを含めるか、別の明示的な却下アクションを提供することをお勧めします。</p>
      <div class="bd-example bd-example-modal">
        <div class="modal" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <p>Modal body text goes here.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"modal-title"</span><span class="nt">&gt;</span>Modal title<span class="nt">&lt;/h5&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
        <span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;p&gt;</span>Modal body text goes here.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Close<span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </figure>
      <h3 id="ライブデモ">ライブデモ</h3>
      <p>下のボタンをクリックして、動作するモーダルデモを切り替えます。 ページの上から下にスライドしてフェードインします。</p>
      <div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Woohoo, you're reading this text in a modal!</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
      <div class="bd-example">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLive">
          Launch demo modal
        </button>
      </div>
      <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Button trigger modal --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModal"</span><span class="nt">&gt;</span>
  Launch demo modal
<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Modal --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"exampleModalLabel"</span><span class="nt">&gt;</span>Modal title<span class="nt">&lt;/h5&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
        <span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
        ...
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Close<span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </figure>
      <h3 id="長いコンテンツをスクロールする">長いコンテンツをスクロールする</h3>
      <p>モーダルがユーザーのビューポートまたはデバイスに対して長くなりすぎると、ページ自体とは無関係にスクロールします。 以下のデモを試して、意味を確認してください。</p>
      <div id="exampleModalLong" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
      <div class="bd-example">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
          Launch demo modal
        </button>
      </div>
      <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Button trigger modal --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModalLong"</span><span class="nt">&gt;</span>
  Launch demo modal
<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Modal --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModalLong"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalLongTitle"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"exampleModalLongTitle"</span><span class="nt">&gt;</span>Modal title<span class="nt">&lt;/h5&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
        <span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
        ...
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Close<span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </figure>
      <h3 id="ログインモーダル">ログインモーダル</h3>
      <div class="bd-example" data-example-id="">
        <button class="btn btn-round" data-toggle="modal" data-target="#loginModal">
          Login<i class="material-icons">assignment</i>
        </button>
        <div class="modal fade" id="loginModal" tabindex="-1" role="">
          <div class="modal-dialog modal-login" role="document">
            <div class="modal-content">
              <div class="card card-signup card-plain">
                <div class="modal-header">
                  <div class="card-header card-header-primary text-center">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                      <i class="material-icons">clear</i>
                    </button>
                    <h4 class="card-title">Log in</h4>
                    <div class="social-line">
                      <a href="#pablo" class="btn btn-just-icon btn-link btn-white">
                        <i class="fa fa-facebook-square"></i>
                      </a>
                      <a href="#pablo" class="btn btn-just-icon btn-link btn-white">
                        <i class="fa fa-twitter"></i>
                        <div class="ripple-container"></div></a>
                      <a href="#pablo" class="btn btn-just-icon btn-link btn-white">
                        <i class="fa fa-google-plus"></i>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="modal-body">
                  <form class="form" method="" action="">
                    <p class="description text-center">Or Be Classical</p>
                    <div class="card-body">
                      <div class="form-group bmd-form-group">
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <div class="input-group-text"><i class="material-icons">face</i></div>
                          </div>
                          <input type="text" class="form-control" placeholder="First Name..." />
                        </div>
                      </div>
                      <div class="form-group bmd-form-group">
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <div class="input-group-text"><i class="material-icons">email</i></div>
                          </div>
                          <input type="text" class="form-control" placeholder="Email..." />
                        </div>
                      </div>
                      <div class="form-group bmd-form-group">
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <div class="input-group-text"><i class="material-icons">lock_outline</i></div>
                          </div>
                          <input type="password" placeholder="Password..." class="form-control" />
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
                <div class="modal-footer justify-content-center">
                  <a href="#pablo" class="btn btn-primary btn-link btn-wd btn-lg">Get Started</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-round"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#loginModal"</span><span class="nt">&gt;</span>
    Login<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>assignment<span class="nt">&lt;/i&gt;</span>

<span class="nt">&lt;/button&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"loginModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">""</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-login"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-signup card-plain"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header card-header-primary text-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
                      <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>clear<span class="nt">&lt;/i&gt;</span>
                    <span class="nt">&lt;/button&gt;</span>

                    <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Log in<span class="nt">&lt;/h4&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"social-line"</span><span class="nt">&gt;</span>
                      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-just-icon btn-link btn-white"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-facebook-square"</span><span class="nt">&gt;&lt;/i&gt;</span>
                      <span class="nt">&lt;/a&gt;</span>
                      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-just-icon btn-link btn-white"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-twitter"</span><span class="nt">&gt;&lt;/i&gt;</span>
                      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ripple-container"</span><span class="nt">&gt;&lt;/div&gt;&lt;/a&gt;</span>
                      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-just-icon btn-link btn-white"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa fa-google-plus"</span><span class="nt">&gt;&lt;/i&gt;</span>
                      <span class="nt">&lt;/a&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                  <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form"</span> <span class="na">method=</span><span class="s">""</span> <span class="na">action=</span><span class="s">""</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"description text-center"</span><span class="nt">&gt;</span>Or Be Classical<span class="nt">&lt;/p&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>

                            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group bmd-form-group"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
                                  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
                                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>face<span class="nt">&lt;/i&gt;&lt;/div&gt;</span>
                                  <span class="nt">&lt;/div&gt;</span>
                                  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"First Name..."</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;/div&gt;</span>
                            <span class="nt">&lt;/div&gt;</span>

                            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group bmd-form-group"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
                                  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
                                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>email<span class="nt">&lt;/i&gt;&lt;/div&gt;</span>
                                  <span class="nt">&lt;/div&gt;</span>
                                  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Email..."</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;/div&gt;</span>
                            <span class="nt">&lt;/div&gt;</span>

                            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group bmd-form-group"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
                                  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
                                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>lock_outline<span class="nt">&lt;/i&gt;&lt;/div&gt;</span>
                                  <span class="nt">&lt;/div&gt;</span>
                                  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">placeholder=</span><span class="s">"Password..."</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">&gt;</span>
                                <span class="nt">&lt;/div&gt;</span>
                            <span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/form&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer justify-content-center"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-link btn-wd btn-lg"</span><span class="nt">&gt;</span>Get Started<span class="nt">&lt;/a&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <h3 id="申し込みモード">申し込みモード</h3>
      <div class="bd-example" data-example-id="">
        <button class="btn btn-round" data-toggle="modal" data-target="#signupModal">
          <i class="material-icons">assignment</i>
          SignUp
        </button>
        <div class="modal fade" id="signupModal" tabindex="-1" role="dialog">
          <div class="modal-dialog modal-signup" role="document">
            <div class="modal-content">
              <div class="card card-signup card-plain">
                <div class="modal-header">
                  <h5 class="modal-title card-title">Register</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="material-icons">clear</i>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="row">
                    <div class="col-md-5 ml-auto">
                      <div class="info info-horizontal">
                        <div class="icon icon-rose">
                          <i class="material-icons">timeline</i>
                        </div>
                        <div class="description">
                          <h4 class="info-title">Marketing</h4>
                          <p class="description">
                            We've created the marketing campaign of the website. It was a very interesting collaboration.
                          </p>
                        </div>
                      </div>
                      <div class="info info-horizontal">
                        <div class="icon icon-primary">
                          <i class="material-icons">code</i>
                        </div>
                        <div class="description">
                          <h4 class="info-title">Fully Coded in HTML5</h4>
                          <p class="description">
                            We've developed the website with HTML5 and CSS3. The client has access to the code using GitHub.
                          </p>
                        </div>
                      </div>
                      <div class="info info-horizontal">
                        <div class="icon icon-info">
                          <i class="material-icons">group</i>
                        </div>
                        <div class="description">
                          <h4 class="info-title">Built Audience</h4>
                          <p class="description">
                            There is also a Fully Customizable CMS Admin Dashboard for this product.
                          </p>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-5 mr-auto">
                      <div class="social text-center">
                        <button class="btn btn-just-icon btn-round btn-twitter">
                          <i class="fab fa-twitter"></i>
                        </button>
                        <button class="btn btn-just-icon btn-round btn-dribbble">
                          <i class="fab fa-dribbble"></i>
                        </button>
                        <button class="btn btn-just-icon btn-round btn-facebook">
                          <i class="fab fa-facebook"> </i>
                        </button>
                        <h4> or be classical </h4>
                      </div>
                      <form class="form" method="" action="">
                        <div class="card-body">
                          <div class="form-group">
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <div class="input-group-text"><i class="material-icons">face</i></div>
                              </div>
                              <input type="text" class="form-control" placeholder="First Name..." />
                            </div>
                          </div>
                          <div class="form-group">
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <div class="input-group-text"><i class="material-icons">email</i></div>
                              </div>
                              <input type="text" class="form-control" placeholder="Email..." />
                            </div>
                          </div>
                          <div class="form-group">
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <div class="input-group-text"><i class="material-icons">lock_outline</i></div>
                              </div>
                              <input type="password" placeholder="Password..." class="form-control" />
                            </div>
                          </div>
                          <div class="form-check">
                            <label class="form-check-label">
                              <input class="form-check-input" type="checkbox" value="" checked="" />
                              <span class="form-check-sign">
                                <span class="check"></span>
                              </span>
                              I agree to the <a href="#something">terms and conditions</a>.
                            </label>
                          </div>
                        </div>
                        <div class="modal-footer justify-content-center">
                          <a href="#pablo" class="btn btn-primary btn-round">Get Started</a>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-round"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#signupModal"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>assignment<span class="nt">&lt;/i&gt;</span>
    SignUp
<span class="nt">&lt;/button&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"signupModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-signup"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-signup card-plain"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"modal-title card-title"</span><span class="nt">&gt;</span>Register<span class="nt">&lt;/h5&gt;</span>
          <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>clear<span class="nt">&lt;/i&gt;</span>
          <span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-5 ml-auto"</span><span class="nt">&gt;</span>
              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"info info-horizontal"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"icon icon-rose"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>timeline<span class="nt">&lt;/i&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"description"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"info-title"</span><span class="nt">&gt;</span>Marketing<span class="nt">&lt;/h4&gt;</span>
                  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"description"</span><span class="nt">&gt;</span>
                  We've created the marketing campaign of the website. It was a very interesting collaboration.
                  <span class="nt">&lt;/p&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
              <span class="nt">&lt;/div&gt;</span>

              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"info info-horizontal"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"icon icon-primary"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>code<span class="nt">&lt;/i&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"description"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"info-title"</span><span class="nt">&gt;</span>Fully Coded in HTML5<span class="nt">&lt;/h4&gt;</span>
                  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"description"</span><span class="nt">&gt;</span>
                  We've developed the website with HTML5 and CSS3. The client has access to the code using GitHub.
                  <span class="nt">&lt;/p&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
              <span class="nt">&lt;/div&gt;</span>

              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"info info-horizontal"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"icon icon-info"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>group<span class="nt">&lt;/i&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"description"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"info-title"</span><span class="nt">&gt;</span>Built Audience<span class="nt">&lt;/h4&gt;</span>
                  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"description"</span><span class="nt">&gt;</span>
                  There is also a Fully Customizable CMS Admin Dashboard for this product.
                  <span class="nt">&lt;/p&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
              <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>

            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-5 mr-auto"</span><span class="nt">&gt;</span>
              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"social text-center"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-just-icon btn-round btn-twitter"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-twitter"</span><span class="nt">&gt;&lt;/i&gt;</span>
                <span class="nt">&lt;/button&gt;</span>
                <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-just-icon btn-round btn-dribbble"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-dribbble"</span><span class="nt">&gt;&lt;/i&gt;</span>
                <span class="nt">&lt;/button&gt;</span>
                <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-just-icon btn-round btn-facebook"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-facebook"</span><span class="nt">&gt;</span> <span class="nt">&lt;/i&gt;</span>
                <span class="nt">&lt;/button&gt;</span>
                <span class="nt">&lt;h4&gt;</span> or be classical <span class="nt">&lt;/h4&gt;</span>
              <span class="nt">&lt;/div&gt;</span>

              <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form"</span> <span class="na">method=</span><span class="s">""</span> <span class="na">action=</span><span class="s">""</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
                      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>face<span class="nt">&lt;/i&gt;&lt;/div&gt;</span>
                      <span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"First Name..."</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                  <span class="nt">&lt;/div&gt;</span>

                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
                      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>email<span class="nt">&lt;/i&gt;&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Email..."</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>

                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
                      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>lock_outline<span class="nt">&lt;/i&gt;&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">placeholder=</span><span class="s">"Password..."</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">/&gt;</span>
                  <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>

                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span>
                      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">checked</span><span class="nt">&gt;</span>
                      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">&gt;</span>
                          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">&gt;&lt;/span&gt;</span>
                      <span class="nt">&lt;/span&gt;</span>
                      I agree to the <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#something"</span><span class="nt">&gt;</span>terms and conditions<span class="nt">&lt;/a&gt;</span>.
                  <span class="nt">&lt;/label&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer justify-content-center"</span><span class="nt">&gt;</span>
              <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-round"</span><span class="nt">&gt;</span>Get Started<span class="nt">&lt;/a&gt;</span>
              <span class="nt">&lt;/div&gt;</span>
              <span class="nt">&lt;/form&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </div>
      <h3 id="ツールチップとポップオーバー">ツールチップとポップオーバー</h3>
      <p><a href="/docs/2.1/components/tooltips/">Tooltips</a> and <a href="/docs/2.1/components/popovers/">popovers</a> can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.</p>
      <div id="exampleModalPopovers" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <h5>Popover in a modal</h5>
              <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute." data-container="#exampleModalPopovers">button</a> triggers a popover on click.</p>
              <hr />
              <h5>Tooltips in a modal</h5>
              <p><a href="#" class="tooltip-test" title="Tooltip" data-container="#exampleModalPopovers">This link</a> and <a href="#" class="tooltip-test" title="Tooltip" data-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
      <div class="bd-example">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalPopovers">
          Launch demo modal
        </button>
      </div>
      <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h5&gt;</span>Popover in a modal<span class="nt">&lt;/h5&gt;</span>
  <span class="nt">&lt;p&gt;</span>This <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary popover-test"</span> <span class="na">title=</span><span class="s">"Popover title"</span> <span class="na">data-content=</span><span class="s">"Popover body content is set in this attribute."</span><span class="nt">&gt;</span>button<span class="nt">&lt;/a&gt;</span> triggers a popover on click.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;hr&gt;</span>
  <span class="nt">&lt;h5&gt;</span>Tooltips in a modal<span class="nt">&lt;/h5&gt;</span>
  <span class="nt">&lt;p&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"tooltip-test"</span> <span class="na">title=</span><span class="s">"Tooltip"</span><span class="nt">&gt;</span>This link<span class="nt">&lt;/a&gt;</span> and <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"tooltip-test"</span> <span class="na">title=</span><span class="s">"Tooltip"</span><span class="nt">&gt;</span>that link<span class="nt">&lt;/a&gt;</span> have tooltips on hover.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </figure>
      <h3 id="youtubeの動画を埋め込む">YouTubeの動画を埋め込む</h3>
      <p>YouTube動画をモーダルに埋め込むには、再生を自動的に停止するために、Bootstrapにはない追加のJavaScriptが必要です。詳細については[https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal]を参照してください。</p>
      <h2 id="任意サイズ">任意サイズ</h2>
      <p>モーダルは2つのオプションのサイズを持ち、 <code class="highlighter-rouge">.modal-dialog</code>に配置される修飾子クラスを通して利用可能です。これらのサイズは、狭いビューポートで水平スクロールバーを避けるために特定のブレークポイントで開始されます。</p>
      <div class="bd-example">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
      </div>
      <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Large modal --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">".bd-example-modal-lg"</span><span class="nt">&gt;</span>Large modal<span class="nt">&lt;/button&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal fade bd-example-modal-lg"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"myLargeModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-lg"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
      ...
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- Small modal --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">".bd-example-modal-sm"</span><span class="nt">&gt;</span>Small modal<span class="nt">&lt;/button&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal fade bd-example-modal-sm"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"mySmallModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-sm"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
      ...
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
      </figure>
      <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              ...
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              ...
            </div>
          </div>
        </div>
      </div>
      <h2 id="使用法">使用法</h2>
      <p>モーダルプラグインは、データ属性またはJavaScriptを介して、あなたの隠しコンテンツをオンデマンドで切り替えます。また、デフォルトのスクロール動作を無効にするために <code class="highlighter-rouge">.modal-open</code>を<code class="highlighter-rouge"> &lt;body&gt; </code>に追加し、モーダルの外側をクリックしたときに表示されたモーダルを閉じるためのクリック領域を提供する<code class="highlighter-rouge"> .modal-backdrop</code>を生成します。</p>
      <h3 id="データ属性による">データ属性による</h3>
      <p>JavaScriptを書かずにモーダルを有効にします。ボタンのようにコントローラ要素で <code class="highlighter-rouge">data-toggle =" modal "</code>を設定し、特定のモーダルを切り替えるために <code class="highlighter-rouge">data-target ="＃foo "</code>または <code class="highlighter-rouge">href ="＃foo "</code>を一緒に設定します。</p>
      <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#myModal"</span><span class="nt">&gt;</span>Launch modal<span class="nt">&lt;/button&gt;</span></code></pre>
      </figure>
      <h3 id="javascript経由">JavaScript経由</h3>
      <p>1行のJavaScriptで、idが <code class="highlighter-rouge">myModal</code>のモーダルを呼び出します。</p>
      <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span></code></pre>
      </figure>
      <h3 id="options">Options</h3>
      <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-backdrop=""</code>.</p>
      <table class="table table-bordered table-striped table-responsive">
        <thead>
          <tr>
            <th style="width: 100px;">Name</th>
            <th style="width: 50px;">Type</th>
            <th style="width: 50px;">Default</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>backdrop</td>
            <td>boolean or the string <code>'static'</code></td>
            <td>true</td>
            <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
          </tr>
          <tr>
            <td>keyboard</td>
            <td>boolean</td>
            <td>true</td>
            <td>Closes the modal when escape key is pressed</td>
          </tr>
          <tr>
            <td>focus</td>
            <td>boolean</td>
            <td>true</td>
            <td>Puts the focus on the modal when initialized.</td>
          </tr>
          <tr>
            <td>show</td>
            <td>boolean</td>
            <td>true</td>
            <td>Shows the modal when initialized.</td>
          </tr>
        </tbody>
      </table>
      <p>あなたがより多くの例と特性を見たいと思うならば、公式をチェックしてください <strong><a href="http://getbootstrap.com/docs/4.0/components/modal/" target="_blank">Bootstrap Documentation</a></strong>.</p>
    </main>
  </div>
</div>